<template>
  <div class="middleDv">
    <div class="middleBottom">
      <div class="headerMaintitle">
        <img class="topPic" src="../assets/rightBottom2.png" alt="" />
        <div class="headerText">标题1</div>
      </div>
      <div class="middleContent">
        <div class="box">
          <div class="boxItem">
            <div class="title">预警数据1</div>
            <div class="num">191</div>
          </div>
          <div class="boxItem">
            <div class="title">预警数据1</div>
            <div class="num">191</div>
          </div>
          <div class="boxItem">
            <div class="title">预警数据1</div>
            <div class="num">191</div>
          </div>
          <div class="boxItem">
            <div class="title">预警数据1</div>
            <div class="num">191</div>
          </div>
        </div>
        <div class="tableBodyDiv">
          <vue-seamless-scroll
            class="scroll_box"
            :data="dataList"
            :class-option="defineScroll"
            style="
              height: 100%;
              overflow: hidden;
              width: 100%;
              color: white;
              font-size: 18px;
              text-align: center;
            "
          >
            <div class="line" v-for="item in dataList" :key="item.id">
              <div class="left">
                <div class="title oneLineEllipsis" style="width: 535px">
                  {{ item.entName }}
                </div>
              </div>
              <div class="right"><span></span>{{ item.value1 }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { sixData } from "@/api/serve";
export default {
  name: "MiddleDv",
  props: {},
  components: {},
  data() {
    return {
      dataList: [
        {
          entName: "金泰花园二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "金泰花园二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "金泰花园二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },

        {
          entName: "金泰花园二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "金泰花园二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "金泰花园二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },

        {
          entName: "金泰花园二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },

        {
          entName: "金泰花园二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "金泰花园二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
      ],
      bottomList: [
        {
          text: "中心受理率",
          num: "0",
          unit: "%",
        },
        {
          text: "超时办结率",
          num: "0",
          unit: "%",
        },
        {
          text: "问题办结率",
          num: "0",
          unit: "%",
        },
        {
          text: "重发复发率",
          num: "0",
          unit: "%",
        },
        {
          text: "办理满意率",
          num: "0",
          unit: "%",
        },
        {
          text: "案例库",
          num: "0",
        },
      ],
    };
  },
  computed: {
    defineScroll() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  watch: {},
  methods: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.middleDv {
  width: 100%;
  height: 100%;
  position: relative;

  .box {
  }
  .middleBottom {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: -28px;
    text-align: left;
    .middleContent {
      display: flex;
      align-items: flex-end;
      background: rgba(56, 169, 255, 0.1);
      padding: 20px;
      height: 500px;
    }
    .box {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .boxItem {
        padding: 10px 15px;
        height: 90px;
        width: 220px;
        background-image: url("../assets/box2.png");
        background-size: 100% 100%;
      }
      .num {
        font-size: 28px;
        color: #01fffe;
        padding-top: 3px;
        span {
          font-size: 20px;
        }
      }
      .title {
        font-size: 20px;
        color: #ffffff;
        line-height: 29px;
        margin-top: 2px;
      }
    }
    .tableBodyDiv {
      margin-left: 30px;
      height: 440px;
      width: calc(100% - 270px);
    }
    .line {
      display: flex;
      height: 60px;
      border: 1px solid rgba(143, 179, 255, 0.2);
      border-top: 0;
      font-size: 20px;
      color: #ffffff;
      line-height: 60px;
      text-align: left;
    }
  }
}
</style>
